<template>
  <div class="container">
    <ComForm :list="comForm"></ComForm>

    <div class="table">
      <ComTable :list="tableList" :modes="tableModes">
        <el-table-column align="left">
          <template>
            <el-button>修改</el-button>
          </template>
        </el-table-column>
      </ComTable>
    </div>
  </div>
</template>
<script>
import ComForm from "../../../components/comForm.vue";
import { getCrawlerListApi } from "@/wss/newApi_3-24/work/crawler.js";
import ComTable from "../../../components/comTable.vue";
export default {
  components: { ComForm, ComTable },
  data() {
    return {
      // 分页参数
      pageing: { pageNum: 1, pageSize: 10 },
      // 失败和成功状态
      currentStatus: "1",
      activeName: "first",
      // 表单配置
      comForm: {
        modes: [
          {
            placeholder: "来源",
            formType: "input",
            mode: "type",
            label: "请输入来源",
            value: "",
          },
          {
            formType: "select",
            mode: "type",
            label: "类型",
            value: "",
          },
          {
            placeholder: "请输入处理人",
            formType: "input",
            mode: "scope",
            label: "处理人",
            value: "",
          },
          {
            placeholder: "",
            formType: "select",
            mode: "scope",
            label: "状态",
            value: "",
            select: [],
          },

          {
            placeholder: "处理日期",
            formType: "date",
            mode: "publishTime",
            label: "申请时间",
            value: null,
            pickerType: "datetime",
          },
        ],
      },
      // 表格数据
      tableList: [],
      // 表格配置
      tableModes: [
        {
          type: "select",

          mode: "select",
        },
        {
          type: "index",
          label: "编号",
          mode: "index",
        },
        {
          showOverflowTooltip: true,

          width: 200,
          label: "来源",
          mode: "source",
        },
        {
          label: "法规小分类",
          mode: "lawType",
        },
        {
          label: "URL",
          mode: "url",
          showOverflowTooltip: true,
        },
        {
          label: "总条数",
          mode: "sum",
        },
        {
          label: "当前条数",
          mode: "current",
        },
        {
          label: "当前条数",
          mode: "cycle",
        },
        {
          label: "状态",
          mode: "status",
        },
        {
          label: "添加人",
          mode: "createdBy",
        },
        {
          label: "添加时间",
          mode: "createdTime",
        },
        {
          label: "最后执行时间",
          mode: "lastTime",
        },
        // {
        //   label: "审核",
        //   mode: "status",
        //   width: 100,
        //   align: "center",
        //   isShowTag: true,
        //   options: [
        //     {
        //       l: "待编辑",
        //       v: 0,
        //     },
        //     {
        //       l: "审核失败",
        //       v: 2,
        //       type: "danger",
        //     },
        //     {
        //       l: "审核中",
        //       v: 1,
        //       type: "warning",
        //     },
        //     {
        //       l: "成功",
        //       v: 4,
        //     },
        //   ],
        // },
        {
          label: "审核",
          mode: "status",
          width: 100,
          align: "center",
          isShowTag: true,
          options: [
            {
              l: "待编辑",
              v: 0,
            },
            {
              l: "审核失败",
              v: 2,
              type: "danger",
            },
            {
              l: "审核中",
              v: 1,
              type: "warning",
            },
            {
              l: "成功",
              v: 3,
            },
            {
              l: "上架",
              v: 4,
            },
            {
              l: "下架",
              v: 5,
            },
          ],
        },
      ],
    };
  },
  mounted() {
    this.getCrawlerListFn();
  },
  methods: {
    // 获取爬虫列表
    async getCrawlerListFn() {
      let { code, rows } = await getCrawlerListApi(this.pageing);
      if (code == 200) {
        console.log(rows);
      }
    },
    // 选择状态
    selectStatus(status) {
      this.currentStatus = status;
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .tab {
    color: #f97f2a;
    padding-left: 20px;
    background-color: #ffffff;
    height: 80px;
    line-height: 80px;
    margin-bottom: 20px;
  }
  padding: 20px 40px;
  background-color: rgba(123, 123, 123, 0.2);
  .title {
    font-size: 28px;
    font-weight: 900;
    margin-bottom: 20px;
  }
  .select {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #f2f2f2;
    .select-item {
      margin-left: 10px;

      width: 200px;
      height: 35px;
      text-align: center;
      line-height: 35px;
      border: 1px solid black;
    }
  }
  .row-box {
    background-color: #ffffff;

    padding: 20px;
    .row {
      padding-left: 10px;
      background-color: #e5e5e5;

      width: 100%;
      box-sizing: border-box;

      // height: 100px;
      min-height: 100px;
      justify-content: flex-start;
      .col {
        display: flex;
      }
      .currentStatusClass {
        color: #f97f2a;
        border: 1px solid #f9802c;
      }
    }
  }

  // ::v-deep .el-tabs__item:hover {
  //   color: #f97f2a;
  // }
}
</style>